<template>
    <div>
        <div class="top">
           
            <div class="left">
                <div class="yulan">
                    <img :src="url" alt="" >
                    <!-- <div class="kuai" ref="kuai"></div> -->
                </div>
                <div>
                    <img :class="{cur:v==url}" :src="v" alt="" v-for="v in data.imgList" :key="v" @mousemove="mousemove(v)">
                </div>
            </div>
            <div class="right">
                 <div>标题:{{data.title}}</div>
                <div>价格:
                    <span :class="{shanchu:$store.state.user.zhekou}">{{data.price}}</span>
                    <span style="color:red" v-if='$store.state.user.zhekou'> 会员: {{($store.state.user.zhekou*data.price*0.1).toFixed(2)}}</span>
                  
                </div>
                <div>分类:{{data.typeName}}</div>
                 <div>销量:{{data.xiaoliang}}</div>
                <div>库存:{{data.kucun}}</div>
                <div>到期时间:{{data.daoqiTime}}</div>
                <el-button :disabled='!data.kucun' type="primary" style="margin-left:20px" @click="submit">
                   {{data.kucun>0?'加入购物车':'库存不足'}} </el-button>
            </div>
        </div>
        <img style="width:100%;height:2000px;margin-top:20px" :src="data.descImg" >
      <div style='border:5px solid red; border-radius:20px;margin-top:20px'>
          <h1 >评论</h1>
      <div style="display:flex;margin-top:20px">
        <el-input v-model='content'  placeholder="请输入评论" ></el-input>
        <el-button type="primary" @click='send'>发送</el-button>
      </div>
        <div class='list'>
            <div class='item' v-for='v in pinglunList' :key='v.id'>
                <div>
                <div>
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="v.startAvatar" alt="">
                    
                    {{v.startName}}
            <span v-if='v.startId==$store.state.user.id'  style='color:#36d'>(我)</span>
                </div>
                <div>{{v.content}}</div>
                <div class='date'>{{v.createTime}}
                <span style='cursor: pointer;' @click='huifu(v)'>回复</span>
                </div>
                </div>
             <div style="display:flex;margin-top:20px" v-show='v.show'>
        <el-input v-model='v.value' :placeholder="yiPla"   >
          <el-button slot="append" icon="el-icon-close" @click='v.show=false'></el-button>
        </el-input>
        <el-button type="primary" @click='send(v)'>发送</el-button>
      </div>
                <div style='padding-left:20px;padding-top:20px'>
                <div v-for='vv in v.children' :key='vv.id' style='margin-bottom:20px'>
                  <div v-if='vv.endId==v.startId'>
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                    {{vv.startName}}       <span v-if='vv.startId==$store.state.user.id'  style='color:#36d'>(我)</span>
                   <span>:{{vv.content}}</span>
                   </div>
                   <div v-else>
                        <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                    {{vv.startName}}    <span v-if='vv.startId==$store.state.user.id' style='color:#36d'>(我)</span>  回复 
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.endAvatar" alt="">
                    <span style="color:#36d">{{vv.endName}}
                        <span v-if='vv.endId==$store.state.user.id' style='color:#36d'>(我)</span>
                   </span>:
                   <span>{{vv.content}}</span>
                   </div>
                    
                <div class='date'>{{vv.createTime}}
                <span style='cursor: pointer;' @click='huifuu(vv)' v-if='vv.startId!=$store.state.user.id'>回复</span>
                </div>
                 <div style="display:flex;margin-top:20px" v-show='vv.show'>
        <el-input v-model='vv.value' :placeholder="erPla"  >
          <el-button slot="append" icon="el-icon-close" @click='vv.show=false'></el-button>
        </el-input>
        <el-button type="primary" @click='send2(v,vv)'>发送</el-button>
      </div>
                </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
    import api from "@/api/index"
    export default {
        data() {
            return {
                url: '',
                data: {},
                pinglunList: [],
                content: '',
                yiPla: '',
                erPla: ''
            }
        },
        mounted() {
            this.getData();
            this.getList();
        },
        methods: {
            huifuu(vv) {
                this.pinglunList.forEach(item => {
                    item.children.forEach(itemm => {

                        this.$set(itemm, 'show', false)
                    })
                    console.log(item)
                })
                this.$set(vv, 'show', true)
                this.erPla = "回复" + vv.startName
            },
            huifu(v) {
                this.pinglunList.forEach(item => {
                    this.$set(item, 'show', false)
                    console.log(item)
                })
                this.$nextTick(() => {
                    this.$set(v, 'show', true)
                })
                this.yiPla = "回复" + v.startName
            },
            send2(v, vv) {
                let data = {
                    startId: this.$store.state.user.id,
                    startName: this.$store.state.user.name,
                    pid: v.id,
                    content: vv.value,
                    productId: this.$route.query.id,
                    endId: vv.startId,
                    endName: vv.startName
                }
                api.addPinglun(data).then(res => {
                    if (res.code == 200) {
                        v.children.push(res.data)
                        vv.value = ''
                        vv.show = false
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                    }
                })
            },
            send(v) {
                let data = {
                    startId: this.$store.state.user.id,
                    startName: this.$store.state.user.name,
                    pid: v.id || 0,
                    content: v.value || this.content,
                    productId: this.$route.query.id,
                    endId: v.startId,
                    endName: v.startName
                }
                console.log(data)
                api.addPinglun(data).then(res => {
                    if (res.code == 200) {
                        if (v.id) {
                            v.children.push(res.data)
                            v.show = false
                            v.value = ''
                        } else {
                            this.pinglunList.push(res.data)

                            this.content = ''
                        }
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                    }
                })
            },
            getList() {
                api.getpinglunList({
                    productId: this.$route.query.id
                }).then(res => {
                    this.pinglunList = res.data
                    console.log(res)
                })
            },
            submit() {
                api.addCart({
                    productId: this.$route.query.id,
                    userId: this.$store.state.user.id
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '加入成功',
                            type: 'success'
                        });
                    }
                })
            },
            mousemove(v) {
                this.url = v
            },
            getData() {
                api.getProductById(this.$route.query.id).then(res => {
                    this.data = res.data
                    this.url = res.data.imgList[0]
                    console.log(111, res);
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .list {
        margin-top: 20px;
        padding: 20px;
        font-size: 20px;
        .item {
            margin-bottom: 60px
        }
    }
    
    .cur {
        border: 1px solid blue;
    }
    
    .date {
        color: #666;
        font-size: 16px
    }
    
    .top {
        display: flex;
        .left {
            width: 40%;
            .yulan {
                position: relative;
                .kuai {
                    width: 100px;
                    height: 100px;
                    background-color: gray;
                    position: absolute;
                    top: 0;
                }
                img {
                    width: 100%;
                    height: 360px;
                    margin-bottom: 10px;
                }
            }
            >div img {
                margin-right: 20px;
                cursor: pointer;
                width: 80px;
                height: 80px;
                border-radius: 10px;
            }
        }
        .right {
            flex: 1;
            >div {
                font-size: 20px;
                padding: 20px;
            }
        }
    }
    
    .shanchu {
        text-decoration: line-through;
    }
</style>